<template>
  <!-- 首页 -->
  <div class="outer">
    <!-- 导航栏 -->
    <div class="navigation-bar flex-center">
      <div class="naviga-title">电商平台</div>

      <div class="naviga-tab flex-center">
        <div
          class="tab-content flex-center"
          v-for="(item, index) in tabsArr"
          :key="index"
          @click="tabsClick(item, index)"
          :style="{
            'border-bottom':
              activeName == index ? '2px solid rgb(64, 158, 255)' : '',
          }"
        >
          {{ item.name }}
        </div>
      </div>
      <!-- 搜索框 -->
      <div class="naviga-search flex-center">
        <el-input
          placeholder="请输入商品名称搜索商品"
          v-model="soppSearchValue"
          clearable
        >
        </el-input>
        <!-- 搜索按钮 -->
        <el-button>搜索</el-button>
      </div>
      <div
        class="naviga-person"
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
      >
        <span>欢迎你！{{ userName }}</span>

        <i class="el-icon-arrow-down"></i>
      </div>
    </div>

    <!-- 商品展示 -->
    <div class="shppingShow">
      <!-- 轮播图 -->
      <el-carousel class="carousel">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="small">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // tabs标签默认选中
      activeName: 0,
      // tabs数组
      tabsArr: [
        {
          id: 1,
          name: "首页",
        },
        {
          id: 2,
          name: "购物车",
        },
        {
          id: 3,
          name: "我的订单",
        },
        {
          id: 4,
          name: "收藏夹",
        },
        {
          id: 5,
          name: "个人中心",
        },
        {
          id: 6,
          name: "收货地址",
        },
      ],
      // 搜索框搜索双向绑定值
      soppSearchValue: null,
      // 用户名称
      userName: "admin",
    };
  },
  methods: {
    // tabs标签改变事件
    tabsClick(row, index) {
      this.activeName = index;
    },
    // 鼠标移入
    handleMouseEnter() {
      console.log("鼠标移入");
    },
    // 鼠标移出
    handleMouseLeave() {
      console.log("鼠标移出");
    },
  },
};
</script>

<style lang="scss" scoped>
.outer {
  width: 100%;
  height: 100vh;
  background: url("../../../assets/images/backUrl.png");
}
// 导航栏
.navigation-bar {
  width: 100%;
  height: 8vh;
  background-color: #fff;

  //   标题
  .naviga-title {
    font-size: 20px;
    font-weight: bold;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
      Microsoft YaHei, SimSun, sans-serif;
    color: rgb(64, 158, 255);
    margin-left: 6vw;
  }
  .naviga-tab {
    width: 30vw;
    margin-left: 7vw;
    .tab-content {
      text-align: center;
      height: 8vh;
      font-size: 14px;
      color: #303133;
      padding: 0px 20px;
    }
  }
  .naviga-search {
    margin-left: 10vw;
  }
  .naviga-person {
    margin-left: 10vw;
    color: #606266;
    font-size: 14px;
  }
}

// 商品展示
.shppingShow {
  // 轮播图
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .carousel{
    width: 65vw;
    margin: auto;
    height: 35vh;
  }
}

.flex-center {
  display: flex;
  align-items: center;
}
::v-deep {
  .el-input__inner {
    width: 20vw;
    margin-right: 1vw;
  }
  // 此时是：设置 carousel 走马灯的高度为：100px;
  .el-carousel__container {  
    height: 320px;
  }
}
</style>